<template>
	<view class="main">
		<header-vue :back="true" title="订单详情"></header-vue>
		
		<view class="bg-box"></view>
		<view class="list">
			<view class="status">
				<!-- <view class="font40 font-blod text-222222">待支付</view> -->
				<!-- <view class="font40 font-blod text-222222">待接单</view> -->
				<view class="font40 font-blod text-222222">服务中</view>
				<!-- <view class="font40 font-blod text-222222">待评价</view> -->
			<!-- 	<view class="flex start font24 text-222222 mt-12rpx" >
					<i class="iconfont icon-clock"></i>
					交易将在20分18秒关闭，请及时付款！
				</view> -->
				<!-- 待接单 -->
				<!-- <view class="flex start font24 text-222222 mt-12rpx" >
					<i class="iconfont icon-clock"></i>
					您的订单已发布，附近师傅正在抢单中，请稍候～
				</view> -->
				<!-- 服务中 -->
				<view class="flex start font24 text-222222 mt-12rpx" >
					<i class="iconfont icon-clock"></i>
					您的订单正在进行中，请稍后...
				</view>
				<!-- 待评价 -->
				<!-- <view class="flex start font24 text-222222 mt-12rpx" >
					<i class="iconfont icon-star"></i>
					服务已完成，期待您的评价！
				</view>
				 -->
			</view>
			
			<!-- 取快递、取外卖，代送，代买商品  -->
			
			<!-- <view class="white-box">
				<view class="text-333333 font28 font-blod">取快递</view>
				
				<view class="flex start mt-28rpx">
					<view class="font24 text-66666"><i class="iconfont icon-clock mr-6rpx"></i> 及时送达 </view>
				</view>
				<view class="flex start mt-40rpx mb-6rpx">
					<view class="address-style"></view>
					<view class="font24 text-333333">华望城涵化院一区韵达快递</view>
				</view> 
				<view class="divider-style"></view>
				<view class="flex start mb-28rpx mt-6rpx">
					<view class="address-style"></view>
					<view class="font24 text-333333">华望城涵化院一区韵达快递</view>
				</view> 
			</view> -->
			
			<!-- 代办---喂养，看娃，遛狗，家事 -->
			<view class="white-box">
				<view class="text-333333 font28">宠物帮遛</view>
				<view class="flex start mt-28rpx">
					<view class="font24 text-66666"><i class="iconfont icon-clock mr-6rpx"></i>  2025-06-03 10:53 </view>
				</view>
				<view class="flex start mt-40rpx mb-6rpx">
					<view class="time-icon"><image src="/static/images/address-icon.png"></image></view>
					<view class="font24 text-333333">华望城涵化院一区韵达快递</view>
				</view> 
			</view>
			
			
			<view class="white-box">
				<view class="flex start font30 fontbold-500">
					<image :src="IMAGE_URL + '/static/mine/title-icon.png'" class="title-icon"></image>
					<view>需求信息</view>
				</view>
				<view class="flex start form-item font28" >
					<view class="color-666">描述内容：</view>
					<view class="text-333" >取件码为: 7-21458 收件人:王思思</view>
				</view>
				<view class="flex  start">
					<view class="prd-img">
						<image src="/static/images/image-test.png"></image>
					</view>
				</view>
			</view>
		
			<view class="white-box">
				
				<view>
						<!-- 取快递、取外卖，代送，代买商品  此处不显示  -->
					<view class="flex start font30 fontbold-500">
						<image :src="IMAGE_URL + '/static/mine/title-icon.png'" class="title-icon"></image>
						<view>收费明细</view>
					</view>
					<view class="flex between form-item font28">
						<view class="color-666">数量</view>
						<view>1件</view>
					</view>
					<view class="flex between form-item font28">
						<view class="color-666">重量</view>
						<view>2KG</view>
					</view>
				</view>
				<view class="flex between form-item font28" style="border: 0;">
					<view class="color-666">虚拟资产</view>
					<view>-20.00</view>
				</view>
				<view class="flex between form-item font28" style="border: 0;">
					<view class="color-666">赏金</view>
					<view>20.00</view>
				</view>
				<view class="flex between form-item font28" style="border: 0;">
					<view>实际金额</view>
					<view>合计：41.00</view>
				</view>
			</view>
			<view class="white-box" style="padding-top: 0;">
				<view class="flex between form-item font28">
					<view class="color-666">订单编号</view>
					<view>DD70058687923622</view>
				</view>
				<view class="flex between form-item font28" style="border: 0;">
					<view class="color-666">下单时间</view>
					<view>2025-06-01 12:23:21</view>
				</view>
				<view>
					<view class="flex between form-item font28">
						<view class="color-666">支付时间</view>
						<view>2025-06-01 12:23:21</view>
					</view>
					<view class="flex between form-item font28" style="border: 0;">
						<view class="color-666">支付方式</view>
						<view>微信/支付宝</view>
					</view>
				</view>
			</view>
		</view>
		<view class="flex between fixed">
			<view class="flex start">
				<view class="item font20" style="text-align: center;">
					<i class="iconfont icon-kefu font40"></i>
					<view>联系客服</view>
				</view>
			</view>
			<!-- 待支付 -->
			<!-- <view class="flex font36 fontbold-500">
					<view class="flex btn-join" @click="goPage('/views/neighobr/complaint')">取消订单</view>
					<view class="flex btn-buy" @click="addGoods('buy')">去支付</view>
				</view> -->
			
			<!-- 待接单 -->
			<!-- <view class="flex font36 fontbold-500">
				<view class="flex btn-join" @click="addGoods('cart')">申请退款</view>
				<view class="flex btn-buy" @click="addGoods('buy')">修改赏金</view>
			</view> -->
			<!-- 服务中 -->
<!-- 			<view class="flex font36 fontbold-500">
				<view class="flex btn-join" @click="goPage('/views/neighobr/complaint')">投诉</view>
				<view class="flex btn-buy" @click="addGoods('buy')">确认完成</view>
			</view> -->
			<!-- 待评价 -->
			<view class="flex font36 fontbold-500">
				<view class="flex btn-buy" @click="goPage('/views/neighobr/evaluate')">去评价</view>
			</view>
		</view>
		
		<u-popup :show="showModal" round="28rpx" mode="center" @close="showModal = false">
			<view class="flex modal-title">
				<view class="flex font28 fontbold-500">备注</view>
				<i class="iconfont icon-close font32" @click="showModal = false"></i>
			</view>
			<view class="modal-content">
				<textarea placeholder="请输入~" v-model="value" class="font24"></textarea>
				<view class="font24 txt-len">{{value.length}}/100</view>
			</view>
			<view class="modal-footer" style="padding: 40rpx 64rpx 28rpx 64rpx">
				<view class="flex submit-btn font32 fontbold-500" @click="showModal = false">确认</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import headerVue from '@/components/header.vue'
	import numBoxVue from '../../views/shop/components/numBox.vue'
	import {
		searchApi
	} from '../../api/modules/shop'
	import appConfig from '@/config/app.js'

	export default {
		data() {
			return {
				IMAGE_URL: appConfig.IMAGE_URL,
				params: {
					keyword: ''
				},
				tabIndex: 0,
				value: '',
				showModal: false
			}
		},
		components: {
			headerVue,
			numBoxVue,
		},
		mounted() {},
		methods: {
			goPage(url) {
				uni.navigateTo({
					url
				});
			},
		}
	}
</script>
<style lang="scss" scoped>
	@import url("/common/public.scss");

	.main {
		background: #F6F6F6;
	}

	.list {
		padding: 0 32rpx 100rpx;
		box-sizing: border-box;
		position: relative;
		z-index: 1;

		.status {
			margin: 28rpx 0;
		}
	}

	.color-gold {
		color: #DF9824 !important;
	}

	.icon-clock,.icon-star {
		font-size: 24rpx;
		color: #DF9824;
		margin-right: 4rpx;
	}

	.bg-box {
		height: 400rpx;
		background: linear-gradient(to bottom, #F3FAFF 0%, rgba(243, 250, 255, 0) 100%) !important;
		position: absolute;
		width: 100vw;
		left: 0;
		z-index: 0;
	}

	.white-box {
		background: $uni-bg-color;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.08);
		border-radius: 20rpx;
		padding: 28rpx 28rpx 16rpx 28rpx;
		box-sizing: border-box;
		margin-bottom: 28rpx;
		
		.title-icon {
			width: 32rpx;
			height: 24rpx;
			margin-right: 10rpx;
		}

		.store-title {
			padding-bottom: 28rpx;
		}

		.iconfont {
			margin-right: 4rpx;
		}

		image {
			width: 200rpx;
			height: 200rpx;
			border-radius: 16rpx;
			margin-right: 20rpx;
			flex-shrink: 0;
		}

		.price {
			color: $uni-text-color-red;
			align-items: baseline;
		}

		.item {
			padding-bottom: 28rpx;
		}

		.store-info {
			width: 100%;
			height: 200rpx;
			align-items: flex-start;

			.tag {
				padding: 0 8rpx;
				height: 28rpx;
				box-sizing: border-box;
				background: #DF9824;
				border-radius: 4rpx;
				margin-right: 8rpx;
				color: $uni-text-color-inverse;
			}

			.sale-num {
				color: $uni-text-color-grey;
				margin-top: 12rpx;
			}

			.num {
				color: $uni-text-color-grey1;
				width: 100%;
			}

			.icon-comment {
				margin-left: 26rpx;
			}
		}

		.color-666 {
			color: $uni-text-color-grey1;
		}
		
		.user {
			margin-top: 30rpx;
			
			.avatar {
				width: 88rpx;
				height: 88rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}
			
			.sex {
				width: 40rpx;
				height: 40rpx;
				margin-right: 12rpx;
			}
			
			.info {
				color: #999;
			}
			
			.line {
				height: 24rpx;
				width: 2rpx;
				background: #DDDDDD;
				margin: 0 12rpx;
			}
		}

		.form-item {
			padding: 28rpx 0 12rpx 0;
			box-sizing: border-box;

			.icon-jiantou {
				margin-left: 8rpx;
				margin-right: 0;
			}

			.flex {
				width: 400rpx;
			}

			input {
				text-align: right;

				::v-deep .input-placeholder {
					color: #AAAAAA;
				}
			}
		}
	}

	.fixed {
		position: fixed;
		width: 100%;
		z-index: 3;
		min-height: 88rpx;
		background: $uni-bg-color;
		padding: 0 32rpx;
		box-sizing: border-box;
		bottom: env(safe-area-inset-bottom);
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
		bottom: 0rpx;
		.btn-buy,
		.btn-join {
			padding: 0 26rpx;
			height: 76rpx;
			border-radius: 60rpx;
			color: $uni-text-color-inverse;
			min-width: 228rpx;
			box-sizing: border-box;
		}

		.btn-buy {
			background: linear-gradient(90deg, #0785CF 0%, #25A4EF 100%);
			box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(7, 133, 207, 0.1);
		}

		.btn-join {
			margin-right: 20rpx;
			background: linear-gradient(90deg, #DF9824 0%, #F4B042 100%);
			box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(223, 152, 36, 0.1);
		}

		.radio {
			width: 22rpx;
			height: 22rpx;
			border-radius: 50%;
			border: 1rpx solid $uni-color-primary;
			margin-right: 8rpx;
		}

		.active {
			color: $uni-text-color;

			.radio {
				background: $uni-color-primary;
				color: $uni-text-color-inverse;
			}
		}
	}

	.modal-box {
		padding: 0 32rpx 60rpx;
		box-sizing: border-box;

		.list-box {
			background: #F6F6F6;
			border-radius: 16rpx;
			padding: 20rpx;
			box-sizing: border-box;

			.title {
				color: $uni-text-color-grey1;
			}
		}
	}

	.modal-content {
		padding: 0 28rpx;
		box-sizing: border-box;
		position: relative;
		color: $uni-text-color-grey;

		textarea {
			width: calc(100vw - 140rpx);
			height: 220rpx;
			background: #FAFAFA;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			padding: 20rpx;
			box-sizing: border-box;
			width: 100%;
		}

		.txt-len {
			position: absolute;
			bottom: 32rpx;
			right: 40rpx;
		}
	}

	.modal-footer {
		padding: 20rpx 64rpx 40rpx 64rpx;
		box-sizing: border-box;

		.submit-btn {
			width: 100%;
			height: 84rpx;
			background: $uni-color-primary;
			box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(7, 133, 207, 0.16);
			border-radius: 100rpx;
			color: $uni-text-color-inverse;
		}
	}
	.time-icon{
		width: 28rpx;
		height: 28rpx;
		margin-right: 6rpx;
		
		image{
			width: 28rpx;
			height: 28rpx;
			vertical-align: top;
		}
	}
	.address-style{
		width: 10rpx;
		height: 10rpx;
		border-radius: 10rpx;
		border: 1rpx solid #DF9824;
		margin-right: 18rpx;
	}
	.divider-style{
		width: 0rpx;
		height: 28rpx;
		border: 1px solid #FFE7C0;
		margin-left: 4rpx;
	}
	.icon-clock {
		font-size: 24rpx;
		color: #DF9824;
		margin-right: 4rpx;
	}
	.prd-img{
		width: 140rpx;
		height: 160rpx;
		image{
			width: 140rpx;
			height: 160rpx;
		}
	}
</style>